#include("/front/teacher/_layout.html")
#@layout()
#define layoutImportcss()
<link rel="stylesheet" href="/static/other/attendanceCalendar/css/style.css?v=0.1" type="text/css" />
#end
#define layoutHead()
<title>课程表 - 班级首页</title>
<style>
	.day-n>span {
			background-color:#ff0000 !important;
			color:#fff !important;
		}
		.day-y>span {
			background-color:#5aadff !important;
			color:#fff !important;
		}
	.demo-card-header-pic .card-header {
	  height: 40vw;
	  background-size: cover;
	  background-position: center;
	  color: #fff;
	}
	.demo-card-header-pic .card-leave {
	  color: #8e8e93;
	  font-size: 14px;
	  margin: 5px auto;
	}
	.demo-card-header-pic .card-content-padding .date{
	  color: #8e8e93;
	}
	</style>
#end
#define layoutHome()
<div class="page-content active-page-content infinite-scroll-content">
<div class="navbar">
	<div class="navbar-inner toolbstyle">
		<div class="left">
			<a href="javascript:window.location.href='/front/teacher/html/index'" class="link back">
				<i class="icon icon-back"></i>
			</a>
		</div>
		<div class="title">课程表 </div>
		<div class="right">
		</div>
	</div>
</div>
	<div>
		<div class="block1">
			<h2>
				<a id="curent_course_date" class="link popup-open" href="#" data-popup=".popup-calendar"></a>
			</h2>

		
		<div class="list course-list">
                        <ul id="ul_courses_plan">
                        </ul>
                    </div>
	</div>
	</div>
</div>

<div class="popup popup-calendar">
	<div class="block1">
				<div class="selectsty">选择上课日期</div>
		<div class="div_calendar_title">
			<h1 id="current_month_label">自定义日历</h1><span onclick="nextMonth();getAttandence();">下一月</span><span onclick="upMonth();getAttandence();">上一月</span>
		</div>
		<div id="calendar_div" class="div_calendar"></div>
<div id="current_date_label" class="div_target_label"></div>
		<p style="text-align: right; margin-right: 20px;"><a class="link popup-close" href="#">取消</a></p>
	</div>
</div>
#end
#define layoutImportjs()
<script src="/static/other/attendanceCalendar/script/date.js"></script>
<script src="/static/other/attendanceCalendar/script/attendanceCalendar.js"></script>
#end
#define layoutScript()
<script type="text/javascript">
	var cur_date = new Date();
	var str_date = formatDate(cur_date.toDateString(), 'yyyy-MM-dd');
	
	ac.setClickFn(clickFn);
	function clickFn(clickDate) {
		cur_date = clickDate;
		str_date = formatDate(cur_date.toDateString(), 'yyyy-MM-dd');
	    setCurentDayCourse(clickDate)
		app.popup.close($$('.popup-calendar'));
	}
	$$('#curent_course_date').css('color','#f05759');
	// 获取当日课程
	function setCurentDayCourse(cur_date){
		var fuul_date = ac.getFullDate(cur_date);
		$$('#curent_course_date').html(fuul_date+'&nbsp;&nbsp;<i class="icon icon-next"></i>');
		$$('#ul_courses_plan').html('<li>loading...</li>');
		
		var start_date = fuul_date.split(' ')[0] + ' 00:00:00';
		var end_date = fuul_date.split(' ')[0] + ' 23:59:59';
		
		var surl = '/front/teacher/course/getCoursePlan?startdate=' + start_date + '&enddate=' + end_date;
		sendPost(surl, null, function(res){
			//console.log(res);
			if (res.code == 200){
				if (res.list_course.length > 0){
					showCoursePlan(res.list_course);
				}else{
					$$('#ul_courses_plan').html('<li style="text-align:center;"><img src="/front/img/nocourse.png" style="width:200px;"></li>');
				}
				
			}else{
				alert(res.msg);
			}
		});
	}
	function showCoursePlan(list_course){
		var shtml = '';
		for(var i=0;i<list_course.length;i++){
			var jdata = list_course[i];
			shtml += getTemplateHtml(jdata);
		}
		$$('#ul_courses_plan').html(shtml);
	}
	
	function getTemplateHtml(jdata){
		var shtml = '<li class="card">';
		if (!isBlank(jdata.front_cover_url)){
			shtml += `
						<div class="align-items-flex-end">
							<a class="link external article-title-color" href="/front/teacher/html/course_detaile?id=${jdata.course_id}&plandate=${str_date}"><img style="height:200px" src="${getZoomFileUrlwh(jdata.front_cover_url, 364, 200)}"></a>
							
						</div>
					`;
		}
		shtml += `
						<div class="card-content card-content-padding">
							<p><a class="link external article-title-color" style="font-size:16px" href="/front/teacher/html/course_detaile?id=${jdata.course_id}&plandate=${str_date}">【${jdata.course_name}】${jdata.class_title}</a>
							</p>
						</div>
					</li>
				`;
		return shtml;
	}
	
	var plandate = getUrlParam("curdate");
	if (!isBlank(plandate)){
	 	cur_date = new Date(Date.parse(plandate.replace(/-/g,"/")));;
	}
	setCurentDayCourse(cur_date);
</script>
#end
